<template>
	<div class="container-wrapper">
		<el-card class="box-card m-b" shadow="never">
			<div slot="header" class="clearfix">
				<span>详情列表</span>
			</div>
			<div>
				<el-table :data="table_data.details" style="width: 100%; margin-bottom: 20px">
					<el-table-column type="expand">
						<template slot-scope="scope">
							<el-form label-position="left" inline class="demo-table-expand">
								<el-form-item
									v-for="(value, key, index) in scope.row.detail"
									:label="key"
									:value="value"
									:key="index"
									label-width="160px"
								>
									<span v-if="key==='测试报告链接'">
										<div v-if="value.length===0">无</div>
										<div v-for="(val, ind) in value" :key="ind" v-else>
											<a :href="val" style="text-decoration:underline" target="_blank">{{ val }}</a>&nbsp;
										</div>
									</span>
									<span v-else style="font-size:13px">{{ value }}</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>
					<el-table-column prop="update_time" label="更新时间" sortable width="180px"></el-table-column>
					<el-table-column label="分支" width="220px">
						<template slot-scope="scope">
							<div style="position: relative">
								<span v-if="scope.row.branch.length < 24">{{ scope.row.branch }}</span>
								<el-popover v-else width="300" trigger="hover" :content="scope.row.branch">
									<span slot="reference">{{ scope.row.branch.substring(0, 23) }}...</span>
								</el-popover>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="build_type" label="构建类型"></el-table-column>
					<el-table-column prop="test_status" label="测试状态"></el-table-column>
					<el-table-column prop="test_result" label="测试结果"></el-table-column>
				</el-table>
				<el-pagination
					style="text-align: center"
					@current-change="handleCurrentChange"
					background
					layout="prev, pager, next"
					:total="dataCount"
					:page-count="table_data.num_pages"
				></el-pagination>
			</div>
		</el-card>
	</div>
</template>
<style scoped lang="scss">
@import '../../assets/common/common.scss';
.container-wrapper >>> .el-tabs--border-card {
	background: none
}
.container-wrapper{
		padding: 32px;
		background-color: rgb(240, 242, 245);
		position: relative;
}
.border{
		box-sizing: content-box;
		height: 0;
		overflow: visible;
		margin-top: 1rem;
		margin-bottom: 1rem;
		border: 0;
		border-top: 1px solid rgba(0,0,0,.1);
}
.primary{
		color: #409EFF;
		font-size: 30px;
		margin-top: 20px;
		margin-bottom: 10px;
		font-weight: 400;
}
.demo-table-expand {
	font-size: 0;
}
.demo-table-expand label {
	width: 160px;
	color: #99a9bf;
}
.demo-table-expand .el-form-item {
	margin-right: 0;
	margin-bottom: 0;
	width: 50%;
}
</style>
<script>
import { getHeader } from '@/app.config'

export default {
	name: 'autoDetailTable',
	props: {
		table_data: Object,
		dataCount: Number
	},
	data() {
		return {
			currentPage: 1
		};
	},
	methods: {
		handleCurrentChange(val) {
			this.currentPage = val;
			var proj_date = this.$route.params.proj_date;
			const projname = proj_date.split('_@_')[0];
			const date = proj_date.split('_@_')[1];
			this.detail_type = proj_date.split('_@_')[2];
			var url =
				process.env.VUE_APP_KANBAN_HOST +
				'/api/devops/table_detail?project=' +
				projname +
				'&date=' +
				date +
				'&type=' +
				this.detail_type +
				'&page=' +
				this.currentPage;
			var self = this;
			this.$axios.get(url, {headers: getHeader()}).then(function(response) {
				if (response.status === 200) {
					if (response.data.code === 200) {
						var data = response.data;
						self.table_data = data;
						self.dataCount = self.table_data.count;
					} else {
						self.table_data = Object;
						self.dataCount = 1;
					}
				}
			});
		}
	}
};
</script>
